<template>
	<view class="condition-item">
		<view class="condition-item__header">
			{{text}}
			<text class="condition-item__header__desc">{{desc}}</text>
		</view>
		<view class="condition-item__footer">
			<view v-if="type === 'date'" class="condition fill-row">
				<uni-datetime-picker type="date" :clear-icon="true" :value="modelValue" :placeholder="placeholderText"
					:border="false" @change="inputChange" />
			</view>

			<view v-if="type === 'daterange'" class="condition fill-row">
				<uni-datetime-picker type="daterange" :clear-icon="true" :value="modelValue" :start="start" :end="end"
					:start-placeholder="placeholderText[0]" :end-placeholder="placeholderText[1]" :border="false"
					@change="daterangeChange" />
			</view>

			<view v-if="type === 'input'" class="condition fill-row">
				<uni-easyinput :value="modelValue" :clearable="false" :placeholder="placeholder" :inputBorder="false"
					:type="dataType" @change="inputChange" />
			</view>

			<template v-if="type === 'rangeInput'">
				<view class="condition">
					<uni-easyinput :value="rangeModelValue[0]" :clearable="false" :placeholder="placeholderText[0]"
						:inputBorder="false" :type="dataType" @change="rangeInputChange1" />
				</view>
				<view class="rang-line">-</view>
				<view class="condition none-margin-left">
					<uni-easyinput :value="rangeModelValue[1]" :clearable="false" :placeholder="placeholderText[1]"
						:inputBorder="false" :type="dataType" @change="rangeInputChange2" />
				</view>
			</template>

			<template v-if="['radio','checkbox','rangeInput'].includes(type)">
				<template v-if="options && options.length>0">
					<view v-for="(item,index) of options" :key="index" class="condition" :class="selectedOption(item)"
						@tap.stop="tapOption(item)">
						<uni-icons class="selected-icon" type="checkmarkempty" size="20rpx" color="white" />
						{{item.text}}
					</view>
				</template>
			</template>
		</view>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		name: 'condition-item',
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { computed } from 'vue';
	import { isEmpty } from '@/utils/util';
	export interface Option { multi : boolean; text : string; value : string | number | string[] | number[] }
	const props = withDefaults(defineProps<{
		id : string;
		text : string;
		desc ?: string;
		field : string | string[];
		modelValue : any;
		type : 'radio' | 'checkbox' | 'input' | 'rangeInput' | 'date' | 'daterange';
		dataType ?: 'text' | 'textarea' | 'password' | 'number' | 'idcard' | 'digit';
		placeholder ?: string | string[];
		options ?: Option[];
		start ?: string | number;
		end ?: string | number;
		required ?: boolean;
	}>(), {
		options: () => []
	});

	const emit = defineEmits<{ change : [id: string, fields: [field: string, value: any][]], 'update:modelValue' : [value: any] }>()

	const placeholderText = computed(() => {
		if (props.type === 'date' && isEmpty(props.placeholder)) {
			return '请选择';
		}
		if (props.type === 'daterange' && isEmpty(props.placeholder)) {
			return ['开始日期', '结束日期'];
		}
		if (props.type === 'rangeInput' && isEmpty(props.placeholder)) {
			return ['请输入', '请输入'];
		}

		return props?.placeholder || '请输入';
	})

	const rangeModelValue = computed(() => {
		return props?.modelValue || [];
	});

	function daterangeChange(value : string[]) {
		emit('update:modelValue', value);
		emit('change', props.id, [[props.field[0], value[0]], [props.field[1], value[1]]]);
	}

	function inputChange(value : string | number) {
		emit('update:modelValue', value);
		emit('change', props.id, [[props.field as string, value]]);
	}

	function rangeInputChange(index : number, value : any) {
		let modelValue = rangeModelValue.value;
		if (Array.isArray(modelValue)) {
			modelValue[index] = value;
		} else {
			modelValue = [value]
		}
		emit('update:modelValue', modelValue);
		emit('change', props.id, [[props.field[index], value]]);
	}

	function rangeInputChange1(value : string | number) {
		rangeInputChange(0, value);
	}
	function rangeInputChange2(value : string | number) {
		rangeInputChange(1, value);
	}

	function tapOption(option : Option) {
		if (props.type === 'radio') {
			const value = props.required ? option.value : props.modelValue === option.value ? null : option.value;
			emit('update:modelValue', value);
			emit('change', props.id, [[props.field as string, value]]);
			return;
		}

		if (props.type === 'checkbox') {
			let value = (isEmpty(props.modelValue) ? [] : props.modelValue) as any[];
			if (value.includes(option.value)) {
				value = value.filter(item => item !== option.value);
			} else {
				value.push(option.value);
			}
			if (props.required && value.length <= 0) {
				value.push(option.value);
			}
			emit('update:modelValue', value);
			emit('change', props.id, [[props.field as string, value]]);
			return;
		}

		if (props.type === 'rangeInput') {
			const optionValue = option.value as any[];
			emit('update:modelValue', optionValue);
			emit('change', props.id, [[props.field[0], optionValue[0]], [props.field[1], optionValue[1]]]);
			return;
		}
	}

	function selectedOption(option : Option) {
		if (props.type === 'rangeInput') return '';
		if (props.type === 'radio' && props.modelValue === option.value) return 'selected';
		if (props.type === 'checkbox') {
			return !isEmpty(props.modelValue) && props.modelValue.includes(option.value) ? 'selected' : '';
		}
		return '';
	}
</script>

<style scoped lang="scss">
	.condition-item {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		flex-shrink: 0;
		width: 100%;

		&__header {
			display: inline-flex;
			align-items: center;
			flex-shrink: 0;
			padding: 20rpx 0 0 20rpx;
			box-sizing: border-box;
			font-size: 26rpx;

			&__desc {
				color: $uni-secondary-color;
				font-size: 22rpx;
				padding-left: 12rpx;
			}
		}

		&__footer {
			display: inline-flex;
			flex-shrink: 0;
			flex-wrap: wrap;

			.rang-line {
				display: inline-flex;
				flex-shrink: 0;
				justify-content: center;
				align-items: center;
				width: 20rpx;
				height: 80rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				color: $uni-secondary-color;
			}

			.condition {
				position: relative;
				display: inline-flex;
				align-items: center;
				// text-align: center;
				width: 100%;
				height: 80rpx;
				padding: 0 20rpx 0 76rpx;
				margin: 20rpx 0 0 20rpx;
				box-sizing: border-box;
				// background-color: $uni-bg-color;
				border-radius: 6rpx;
				font-size: 30rpx;
				color: #3B3838;

				&.fill-row {
					width: 100%;
					margin-right: 20rpx;
				}

				:deep(.uni-easyinput) {
					.uni-easyinput__content {
						border-radius: 28rpx;
					}

					.uni-easyinput__content-input {
						height: 56rpx;
						line-height: 56rpx;
					}
				}

				:deep(.uni-date) {
					.uni-date-x {
						border-radius: 28rpx;
					}

					.uni-date__x-input,
					.range-separator {
						height: 56rpx;
						line-height: 56rpx;
					}
				}

				&.none-margin-left {
					margin-left: 0;
				}

				&.none-padding {
					padding: 0;
				}

				&.multi {
					font-size: 22rpx;
				}

				.selected-icon {
					display: none;
				}

				&.selected {
					background: #FBE8DA;
					color: #FF710A;

					// .selected-icon {
					// 	position: absolute;
					// 	top: 0;
					// 	left: 0;
					// 	display: inline-flex;
					// 	justify-content: center;
					// 	align-items: center;
					// 	width: 24rpx;
					// 	height: 22rpx;
					// 	border-radius: 6rpx 0 6rpx 0;
					// 	background-color: $uni-bg-color-active;
					// }
				}
			}
		}
	}
</style>